<!--
  侧边分类菜单组件
-->
<template>
  <div>
    <div class="tree-top-tool-btn-box">
      <el-button plain size="mini" v-show="addBtnShow" icon="el-icon-plus" @click="addBtnClickHandler"></el-button>
      <el-button plain size="mini" v-show="delBtnShow" icon="el-icon-delete" @click="delBtnClickHandler"></el-button>
      <el-button plain size="mini" v-show="editBtnShow" icon="el-icon-edit" @click="editBtnClickHandler"></el-button>
      <el-button plain size="mini" v-show="settingBtnShow" icon="el-icon-setting" @click="settingBtnClickHandler"></el-button>
    </div>
    <div class="tree-box" @click="treeBoxClickHandler">
      <el-tree
          :key="treeKey"
          ref="cateTree"
          node-key="id"
          :data="categoriesTree"
          :highlight-current="true"
          :current-node-key="curNodKey"
          @node-click="treeNodeClickHadler"
          :render-content="renderNodeContent">
      </el-tree>
    </div>
  </div>
</template>

<script>
export default {
  name: "SideCategoryMenu",
  props: {
    categoriesTree: {
      type: Array,
      require: true
    },
    firstDefaultChecked: {
      type: Boolean,
      require: true
    },
    addBtnShow: {
      type: Boolean,
      default: true,
    },
    delBtnShow: {
      type: Boolean,
      default: true,
    },
    editBtnShow: {
      type: Boolean,
      default: true,
    },
    settingBtnShow: {
      type: Boolean,
      default: true,
    }
  },
  data() {
    return {
      selectNode: null,
      curNodKey: null,
      treeKey: "",
    }
  },
  methods: {
    addBtnClickHandler() {
      this.$emit('add-btn-click');
    },

    delBtnClickHandler() {
      this.$emit('del-btn-click');
    },

    editBtnClickHandler() {
      this.$emit('edit-btn-click');
    },

    treeNodeClickHadler(node) {
      this.selectNode = node;
      this.$emit('tree-node-click', node);
    },

    settingBtnClickHandler(node) {
      this.$emit('setting-btn-click');
    },

    // 点击空白处
    treeBoxClickHandler() {
      if (this.selectNode) {
        this.$refs.cateTree.setCurrentKey(null);
        this.$emit('tree-node-cancel-check');
      }
    },

    // 渲染节点内容
    renderNodeContent(h, {node, data, store}) {
      let iconClass = (node.data && node.data.type === "directory") ? 'el-icon-folder' : 'el-icon-document';
      if (node.childNodes && node.childNodes.length > 0) {
        if (node.expanded) {
          iconClass = 'el-icon-folder-opened';
        } else {
          iconClass = 'el-icon-folder';
        }
      }
      let nodeLabel = data.type === 'feature' ? data.label + "( " + data.name + " )" : (data.label === null || data.label === '' ? data.name : data.label);
      return h('span', [
        h('i', {class: iconClass}),
        h('span', " "),
        h('span', {class: 'tree-node-text'}, nodeLabel)
      ])
    },
  },

  created() {
    // if (this.firstDefaultChecked && this.categoriesTree) {
    //   setTimeout(() => {
    //     if (this.categoriesTree.length > 0) {
    //       this.$refs.cateTree.setCurrentKey(this.categoriesTree[0].id);
    //     }
    //   }, 300)
    // }
  },
  mounted() {

  },

  computed: {
    treeDataLength() {
      return this.categoriesTree.length;
    }
  },

  watch: {
    'categoriesTree.length': function () {
      this.treeKey = new Date().getTime();
    }
  }
}
</script>

<style scoped>
  .tree-top-tool-btn-box {
    display: flex;
    border-bottom: 1px solid #e6e6e6;
    padding: 5px;
    min-width: 216px;
  }

  .tree-box {
    height: calc(100vh - 153px);
  }

</style>